<template> 
<div>
     <button @click="num++">{{num}}</button>
     <button @click="setNum(num+5)">{{num}}</button>
</div>
</template>
<script>
// vue3 采用按需价值
// 01 导入创建值类型的响应方法
// 02 更加接近原生js
import{ref} from 'vue';

// vue3 和vue2 百分之90相同
export default {
  setup(){
    const num = ref(5);
    // 修改num方法
    function setNum(n){
      // ref的对象在setup使用.value 访问其值
      num.value = n;
    }
    return {num,setNum};
  },

  // data 定义数据
  data(){
    return {msg:"学好vue3学薪3w"}
  },
  // computed 计算
  computed:{
    "rmsg":function(){ return this.msg.split('').reverse().join('')}

  },
  created(){
    console.log("组件已经创建");
  },
  
  // 创建前后，挂着前后，更新前后，卸载前后
  beforeUnmount(){
    console.log("组件将要卸载"," beforeUnmount")
  },
  unmounted(){
    console.log("组件已经卸载","  unmounted")
  }
}
</script>